<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Document</title>
        <script src="../js/vue2-dev.js"></script>
    </head>
    <body>
        <div id="root">
            <!--
                1.在标签体内的引用叫做 插值语法
                2.使用方法就是在标签体内使用 {{ xxx }} 进行插值
                3.这个xxx是js表达式，什么叫做js表达式呢，就是可以写在script标签中的都是js表达式
                4.比如 const a = name, 那么a是一个变量，我们把name的值赋值给a，那么name就是一个表达式
                  再比如说const time = date.now()，这个time也是个变量，那么data.now()也是js表达式
                5.就是说在js中，可以用等号赋值的表达式的右边就是js表达式
            -->
            <h1>{{ name }}</h1>
            <h1>{{ Date.now() }}</h1>
            <!--
                1.在属性中的引用数据的方法叫做 指令语法 
                2.由于属性的赋值不能使用上面那种 {{ xxx }} 的形式（其实很早之前也是可以的）
                  所以我们采用 v-bind 的形式去进行赋值，就是在属性前面加上 v-bind: 就可以引入vue实例中data中的数据了
                3.这个 v-bind 是vue的自创指令，还有类似的 v-for、v-if 等
                4.其中有且只有 v-bind:可以简写成 :
                5.指令语法写的也是js表达式
            -->
            <a v-bind:href="url">点击我去百度</a>
            <a :href="url">点击我去百度</a>
            <a :href="Date.now()">点击我去百度</a>
        </div>

        <script>
            const vm = new Vue({
                el: "#root",
                data: {
                    name: "xuhu",
                    url: "http://www.baidu.com",
                },
            });
        </script>
    </body>
</html>
